---
title: use
authors: Hypoxia
date: 2025.4.04
---

> 接收异步操作，可在异步操作完毕后执行渲染

### 基础用法

```tsx
import { use, useEffect, useState } from "react";

async function request(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("hello");
    }, 2000);
  });
}

function Demo({ promise }) {
  let text = "";

  if (promise) {
    text = use(promise);
  }

  return promise ? <div>{text} world</div> : null;
}

export default function App() {
  const [promise, setPromise] = useState<Promise<string> | null>(null);

  useEffect(() => {
    setPromise(request());
  }, []);

  return (
    <>
      <Demo promise={promise} />
    </>
  );
}
```

1. `use` 是一个函数，可以接收一个 Promise 对象；返回 Promise 值
2. `use` 只能在函数组件或 hook 中使用，可以嵌套在条件语句中
3. 如果 Promise 对象处于 pending 状态，`use` 会挂起渲染
4. 如果 Promise 对象处于 fulfilled 状态，`use` 执行渲染


### 配合 Suspense

> 配合 Suspense 可以中断 `use` 挂起的渲染，直至异步完成重新渲染

```tsx
import { use, useEffect, useState, Suspense } from "react";

async function request(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("hello");
    }, 2000);
  });
}

function Demo({ promise }) {
  let text = "";

  if (promise) {
    text = use(promise);
  }

  return promise ? <div>{text} world</div> : null;
}

export default function App() {
  const [promise, setPromise] = useState<Promise<string> | null>(null);

  useEffect(() => {
    setPromise(request());
  }, []);

  return (
    <>
      <Suspense fallback={<span>loading</span>}>
        <Demo promise={promise} />
      </Suspense>
    </>
  );
}
```

1. `Suspense` 组件包裹使用 `use` 的组件
2. `Suspense` 组件接收 `fallback` 属性，表示异步挂起时渲染的内容
